import { Component } from '@angular/core';
import { NavController, NavParams, LoadingController, Loading, ModalController, AlertController} from 'ionic-angular';
import { DataService } from '../../services/data';
import { Storage } from '@ionic/storage';
import { StatisticsPage } from '../statistics/statistics';
import Avatars from '@dicebear/avatars';
import SpriteCollection from '@dicebear/avatars-identicon-sprites';
import {DomSanitizer} from '@angular/platform-browser'

/*
  Generated class for the My page.

  See http://ionicframework.com/docs/v2/components/#navigation for more info on
  Ionic pages and navigation.
*/
@Component({
  selector: 'page-rank',
  templateUrl: 'rank.html',
  providers: [DataService]
})
export class RankPage {

  public games = [
    {id: 1, name: '三国霸业'},
    {id: 2, name: '伏魔记'}
  ]
  public selectGameId:number = 1
  public rank:any
  private loader:Loading
  avatars = new Avatars(SpriteCollection);
  constructor(public navCtrl: NavController, private sanitizer: DomSanitizer, public modalCtrl: ModalController, public navParams: NavParams, public dataService: DataService, public storage: Storage, public loadingCtrl: LoadingController, public alertCtrl: AlertController) {
   
  }

  ionViewDidLoad() {
    this.getRank(this.games[0].id)
  }

  getRank(gameId){
    this.dataService.getGameRank(gameId).subscribe(data => {
      console.log(data)
      for(let item of data){
        item.icon = this.sanitizer.bypassSecurityTrustHtml(this.avatars.create(item.user_id));
        console.log(item.icon)
      }
      this.rank = data
    });
  }

  pushStatistics(id){
    this.navCtrl.push(StatisticsPage, {id : id})
  }
}